import React, {Component} from 'react'
// import termsFrPath from '../md/test.md'
// import "./Markdown.scss"
import "../themes/github.css"
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'

class Markdown extends Component {
  constructor(props) {
    super(props)

    this.state = {text: ""}
  }

  componentDidMount() {
    fetch(this.props.md)
      .then(response => {
        return response.text()
      })
      .then(text => {
        this.setState({text: text})
      })
  }

  render() {
    return (
      <div id="preview" className={"markdown-body"}>
        {
          unified()
            .use(parse)
            .use(remark2react)
            .processSync(this.state.text).result
        }
      </div>
    )
  }
}

export default Markdown